<mat-toolbar class="title" color="primary">
  <div>{{'LINK.settings' | translate}}</div>
  <button mat-icon-button (click)="onNoClick()">
    <fa-icon icon="times"></fa-icon>
  </button>
</mat-toolbar>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>{{'LINK.title' | translate}}</mat-label>
    <input matInput [(ngModel)]="data.title">
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>{{'widgets.clock.settings.timezone' | translate}}</mat-label>
    <mat-select [(value)]="data.desc">
      <mat-option *ngFor="let timeZone of arrayTimeZones" [value]="timeZone" (click)="onSelectTimeZone(timeZone)">
        {{timeZone}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>{{'widgets.clock.settings.clockType' | translate}}</mat-label>
    <mat-select [(value)]="data.showAnalog">
      <mat-option *ngFor="let clockType of arrayClockType" [value]="clockType" (click)="onChange">
        {{clockType}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>{{'widgets.clock.settings.timeFontSize' | translate}}</mat-label>
    <input type="number" autocomplete="off" [min]="minSize" [max]="maxSize" matInput [ngModel]="data.fontSizeClock" (ngModelChange)="data.fontSizeClock = validateValue($event)">
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>{{'widgets.clock.settings.dateFontSize' | translate}}</mat-label>
    <input type="number" autocomplete="off" [min]="minSize" [max]="maxSize" matInput [ngModel]="data.fontSizeDate" (ngModelChange)="data.fontSizeDate = validateValue($event)">
  </mat-form-field>
</div>
<mat-checkbox color="primary" [(ngModel)]="data.showDate" labelPosition="before" (click)="onChange()">Show Date</mat-checkbox>
<div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
  <button mat-raised-button (click)="onNoClick()">{{'LINK.buttons.cancel' | translate}}</button>
  <button mat-raised-button class="setting-btn-ok" [mat-dialog-close]="data" cdkFocusInitial>{{'LINK.buttons.save' | translate}}</button>
</div>
